@()

@style = {
  <style>
    p {
      border: 1px solid var(--el-border-color);
    }
  </style>
}

@main("Welcome to Play")(style) {
  <h1>Welcome to Play!</h1>
  <div id="app">
    <p>{{ message }}</p>
    <el-button :type="counter.level" v-on:click="chameleon" plain round>Click me!</el-button>
  </div>
} {
  <script>
    const { createApp, reactive, ref } = Vue

    const app = createApp({
      setup() {
        const message = ref('Hello, Vue!')
        const counter = reactive({
          count: 0,
          level: 'info'
        })

        function chameleon(e) {
          switch (counter.count++ % 3) {
            case 1:
              counter.level = 'success'
              break
            case 2:
              counter.level = 'primary'
              break
            default:
              counter.level = 'danger'
          }
        }

        return {
          message,
          counter,
          chameleon
        }
      }
    })
    
    app.use(ElementPlus)
    app.mount('#app')
  </script>
}
